<script setup>
// 1. 发接口拿金额
    // import { getPayAPI } from '@/network/pay';
    // import {useRoute} from 'vue-router'
    // import {ref, onMounted} from 'vue'
    

//     const route = useRoute()
//     const pay = ref({})
//    async function getPay() {
//         const res = await getPayAPI(route.query.orderId)
//         console.log(res);
//         pay.value = res.result
//     }
//     onMounted(() => {
//         getPay()
//     })

    // 2. 用pinia
    import {usePayStore} from '@/stores/payStore.js'
    const payStore = usePayStore()
    // console.log(payStore);
</script>


<template>
    <div class="payment-results">
        <div class="container">
            <!-- 支付结果 -->
            <div class="result">
                <span class="iconfont icon-queren2 green" v-if="$route.query.payResult === 'true'"></span>
                <span class="iconfont icon-shanchu red" v-else></span>
                <p class="success"> {{$route.query.payResult === 'true' ? '支付成功' : '支付失败'}}</p>
                <p class="desc">{{$route.query.payResult === 'true' ? '支付成功我们将尽快为您发货，收货期间请保持手机畅通' : '请重新支付'}}</p>
                <p>
                    支付方式：
                    <span>支付宝</span>
                </p>
                <p>
                    支付金额：
                    <span class="price">¥ {{payStore.payPrice.toFixed(2)}}</span>
                </p>
                <div class="btn">
                    <el-button size="large" type="primary" @click="$router.push('/member/order')" class="el-btn">查看订单</el-button>
                    <el-button size="large" @click="$router.push('/')">进入首页</el-button>
                </div>
                <p class="foot">
                    <span class="iconfont icon-tip"></span>
                    温馨提示：小兔鲜儿不会以订单异常、系统升级为由要求您点击任何网址链接进行退款操作，保护资产、谨慎操作。 
                </p>
            </div>
        </div>
    </div>
</template>


<style scoped lang='scss'>
    .payment-results{
        margin-top: 20px;
        text-align: center;
        .result{
            padding: 100px 0;
            background: #fff;
            .green{
                color: $sucColor;
            }
            .red{
                color: $priceColor;
            }
            &>.iconfont{
                font-size: 100px;
            }
            
            p{
                line-height: 40px;
                font-size: 16px;
                &.success{
                    font-size: 24px;
                }
                &.desc{
                    color: #999;
                }

                span{
                    &.price{
                        color: $priceColor;
                        font-size: 20px;
                    }
                }
            }

            .btn{
                margin-top: 50px;
                .el-btn{
                    margin-right: 20px;
                }
            }

            .foot{
                margin-top: 50px;
                color: #999;
                font-size: 12px;
            }
        }
    }
</style>